<template>
    <div class="task-h">
        <div class="task-h-l">{{ title }}</div>
        <div class="task-h-r">
            <div class="result">{{ leftText.label }}</div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        default: '2024年12月23日的作业内容'
    },
    leftText: {
        type: Object,
    }
})
</script>

<style lang="scss" scoped>
.task-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0px;

    .task-h-l {
        font-size: 18px;
        font-weight: 500;
        color: #333;
    }

    .task-h-r {
        display: flex;
        align-items: center;

        .result {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 19.6px;
            text-align: left;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-underline-position: from-font;
            text-decoration-skip-ink: auto;
            color:#126983
        }
    }
}
</style>